/**
 * Knak Global CSS
*/

/* Layers */
@layer knak.tokens, knak.base, knak.components, knak.utilities;

/* Tokens */
@layer knak.tokens {
  :root {
    --font-primary: "Inter", sans-serif;
    --font-secondary: Arial, sans-serif;

    --font-thin: 100;
    --font-extralight: 200;
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;

    --color-black: #000000;
    --color-white: #ffffff;
    --color-pulse-red: #cc092f;
    --color-navy-blue: #1b1d36;
    --color-steel-purple: #6c4b94;
    --color-cobalt-blue: #0098c7;
    --color-sapphire: #005c8a;
    --color-slate-100: #f5f5f6;
    --color-slate-200: #e8e8eb;
    --color-slate-300: #d1d2d7;
    --color-slate-400: #bbbbc3;
    --color-slate-500: #757586;
    --color-slate-600: #494a5e;
    --color-slate-700: #32344a;
    --color-slate-800: #272941;

    --spacing: 5px;
    --space-0: 0;
    --space-px: 1px;
    --space-1: calc(1 * var(--spacing));
    --space-2: calc(2 * var(--spacing));
    --space-3: calc(3 * var(--spacing));
    --space-4: calc(4 * var(--spacing));
    --space-5: calc(5 * var(--spacing));
    --space-6: calc(6 * var(--spacing));
    --space-7: calc(7 * var(--spacing));
    --space-8: calc(8 * var(--spacing));
    --space-9: calc(9 * var(--spacing));
    --space-10: calc(10 * var(--spacing));
    --space-15: calc(15 * var(--spacing));
    --space-20: calc(20 * var(--spacing));
    --space-25: calc(25 * var(--spacing));
    --space-30: calc(30 * var(--spacing));
    --space-35: calc(35 * var(--spacing));
    --space-40: calc(40 * var(--spacing));
    --space-45: calc(45 * var(--spacing));
    --space-50: calc(50 * var(--spacing));
    --space-full: 100%;

    --text-xs: 13px;
    --text-sm: 14px;
    --text-md: 15px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 19px;
    --text-3xl: 22px;
    --text-4xl: 26px;
    --text-5xl: 32px;
    --text-6xl: 44px;

    --leading-xs: 20px;
    --leading-sm: 21px;
    --leading-md: 23px;
    --leading-lg: 24px;
    --leading-xl: 25px;
    --leading-2xl: 29px;
    --leading-3xl: 31px;
    --leading-4xl: 34px;
    --leading-5xl: 38px;
    --leading-6xl: 54px;

    --tracking-tighter: -0.5px;
    --tracking-tight: -0.25px;
    --tracking-normal: 0;
    --tracking-wide: 0.25px;
    --tracking-wider: 0.5px;
    --tracking-widest: 1px;

    --border-0: 0;
    --border-1: 1px;
    --border-2: 2px;
    --border-3: 3px;
    --border-4: 4px;
    --border-5: 5px;
    --border-6: 6px;
    --border-7: 7px;
    --border-8: 8px;
    --border-9: 9px;
    --border-10: 10px;
  }
}

/* Base */
@layer knak.base {
  html {
    font-family: var(--font-secondary);
  }
}

/* Components */
@layer knak.components {
}

/* Utilities */
@layer knak.utilities {
  .embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;

    iframe,
    object,
    embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}

/* Forms (intentionally outside @layer) */
.elq-form {
  color: var(--color-slate-600);
  font-size: var(--text-md);
  line-height: var(--leading-md);

  /* Layout */
  > .container-fluid {
    padding-top: var(--space-3);
    padding-left: var(--space-3);
    padding-right: var(--space-3);
    padding-bottom: var(--space-0);
  }

  & .form-element-layout {
    padding: var(--space-0);
  }

  & .elq-field-style {
    padding-bottom: var(--space-3);
  }

  & .field-control-wrapper {
    display: flex;
    flex-direction: column;
  }

  /* Text */
  & .elq-heading {
    font-size: var(--text-md) !important;
    font-weight: var(--font-normal);
    line-height: var(--leading-md);
  }

  & .form-element-instruction {
    color: var(--color-slate-500);
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
    margin-top: var(--space-1);
  }

  /* Inputs */
  & :is(.elq-item-input, .elq-item-textarea, .elq-item-select) {
    background-color: var(--color-white);
    border: var(--border-1) solid var(--color-slate-400);
    height: var(--space-8);
    padding: var(--space-1) var(--space-2);
  }

  & .elq-item-textarea {
    min-height: var(--space-15);
    height: auto;
  }

  /* Checkboxes */
  & :is([type="checkbox"], [type="radio"]) {
    width: var(--space-3);
    height: var(--space-3);
  }

  & .single-checkbox-row {
    align-items: center;
    display: flex;
    margin-left: var(--space-0);
    margin-right: var(--space-0);
  }

  & .list-order {
    align-items: center;
    display: flex;
    flex-direction: row;
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
  }

  & .checkbox-aligned {
    margin-left: var(--space-2);
  }

  & input[name="optIn"] {
    margin-right: var(--space-2);

    + label {
      font-size: var(--text-xs);
      line-height: var(--leading-xs);
      margin: var(--space-0);
    }
  }

  /* Validation */
  & .LV_validation_message {
    font-weight: var(--font-normal);
    margin: var(--space-0);
  }

  & .LV_invalid {
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
  }

  /* Submit */
  & .submit-button-style {
    background-color: var(--color-sapphire);
    border-radius: var(--space-0);
    border: var(--border-1) solid var(--color-sapphire);
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wider);
    line-height: var(--leading-sm);
    padding: var(--space-2) var(--space-4);

    &:hover {
      background-color: var(--color-white);
      color: var(--color-sapphire);
    }
  }
}